<!--自定义输入框模板-->
<template>
  <div class="input-container">
    <input v-bind:type="type" v-bind:placeholder="placeholder" v-bind:class="inputStatus" v-bind:value="value"
           v-on:input="$emit('input',$event.target.value)" v-on:change="$emit('change',$event.target.value)">
    <div class="input-error-container">
      <p v-if="error">
        {{ error }}
      </p>
    </div>

  </div>
</template>

<script>
export default {
  name: "m-input",
  props: ["type", "placeholder", "error", "value"],
  // data: function () {
  //   return {value: this.value}
  // },
  computed: {
    inputStatus: function () {
      return {
        inputActive: !this.error,
        inputError: this.error,
      }
    }
  }
}
</script>

<style scoped>
/*使用流式布局*/
.input-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

/*错误信息*/
.input-error-container {
  height: 25px;
}

input {
  width: 100%;
  height: 38px;
  /*宽度包括padding*/
  box-sizing: border-box;
  border-style: solid;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  border-width: 1px;
  border-color: #EFEFEF;
  outline: none;

}

/*鼠标移动到输入框时的样式*/
.inputActive:hover {
  border-color: #A0ABC0CC;
}

/*输入框获得光标时修改样式*/
.inputActive:focus {
  border-color: dodgerblue;
}

.inputError {
  border-color: red;
}

/*修改placeholder的字体样式*/
input::placeholder {
  color: #33333333;
}
@keyframes firstEnter {
  from {
    top: -5px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes firstEnter /* Safari and Chrome */
{
  from {
    top: -5px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
p {
  padding: 0;
  margin-top: 3px;
  margin-left: 2px;
  color: red;
  font-size: 12px;
  animation: firstEnter 500ms;
  -webkit-animation: firstEnter 500ms;
  position: relative;
}
</style>